//文本
var exports = {};

var Slider = require("./../utils/Slider.js");

var element = null;

var textPath = null;

var textInput = $("#textInput");
var panel = $("#textToolPanel");
var addSize = $("#add-size");
var subtractSize = $("#subtract-size");
var sizeArr = [12, 14, 16, 18, 20, 22, 26, 28, 36, 48, 56, 72, 86, 100];
var familyArr = ["AcademicM54","aguzlo","BrushScriptStd","chiller","ClarendonCondensed","EccentricStd","forte","varsity","FZHei-B01S",
	"Butter","Happy","HightHei","Seaside","Spaghettica","FridayNight","Vermin","Comeback","Distort","Digital","Agra"
];
//设置字体
for (var i = 0; i < familyArr.length; i++ ) {
	var str = '@font-face {font-family: '+familyArr[i]+';src: url("css/font/'+familyArr[i]+'.woff") format("TrueType");}';
	$("style").eq(0).append(str);
}

exports.init = function() {
	textInput.on("change", textChange);
	textInput.on("keydown", textChange);
	textInput.on("keyup", textChange);

	//颜色拾取器
	$('#picker').colpick({
		flat: true,
		layout: 'hex',
		submit: 0,
		onChange: function(v) {
			var color = $("#picker").find(".colpick_hex_field").find("input").val();
			if (element) {
				exports.color("#" + color);
			}
		}
	});

	$('#bgpicker').colpick({
		flat: true,
		layout: 'hex',
		submit: 0,
		onChange: function(v) {
			var color = $("#bgpicker").find(".colpick_hex_field").find("input").val();
			if (element) {
				exports.bgColor("#" + color);
			}
		}
	});

	$(".fontcolor .simple-color-picker-ul").find("li").on("click", function() {
		var color = $(this).data("fontcolor");
		if (element) {
			exports.color(color);
		}
	});

	$(".bgcolor .simple-color-picker-ul").find("li").on("click", function() {
		var color = $(this).data("fontcolor");
		if (element) {
			exports.bgColor(color);
		}
	});

	panel.find(".icon-guanbi").on("click", function() {
		exports.unbind();
	});

	var bboxw = 100;
	var bboxh = 40;
	var mslider = new Slider("#bendingSlider");
	mslider.on("start", function(e, bili) {
		if (element) {
			element.path = false;
			bboxh = element.element.getBBox(true).height;
			bboxw = element.element.getBBox(true).width;
		}
		createTextPath(bboxw, bboxh, bili);
	});
	mslider.on("update", function(e, bili) {
		if (bili > 43 && bili < 57) {
			bili = 50;
			mslider.setBili(bili);
		}
		createTextPath(bboxw, bboxh, bili);
	});
	mslider.on("complete", function() {
		if (textPath) {
			textPath.remove();
		}
	});

	function createTextPath(bboxw, bboxh, ty) {
		if (element) {
			var r = (1000 - Math.abs(ty - 50) * 20) / 2;
			if (ty == 50) {
				r = 10000;
			}
			var start = {
				x: bboxw / 2,
				y: 2 * r + bboxh
			};
			var end = {
				x: 0,
				y: -2 * r
			}
			var sun = true;
			if (ty < 50) {
				sun = false;
				start = {
					x: bboxw / 2,
					y: -2 * r
				};
				end = {
					x: 0,
					y: 2 * r
				}
				element.baseline = "text-before-edge";
			} else {
				element.baseline = "text-after-edge";
			}
			element.path = criclePath(start, end, r, sun);
			Design.tool.update();
		}
	}

	function criclePath(start, end, r, sun) {
		//path 属性
		if (sun) {
			var descriptions = ['M' + start.x, start.y + ' ' +
				'a' + r, r + ' 0 0', '1 ' + end.x, end.y + ' ' +
				'a' + r, r + ' 0 1', '1 ' + -end.x, -end.y
			];
		} else {
			var descriptions = ['M' + start.x, start.y + ' ' +
				'a' + r, r + ' 0 0', '0 ' + end.x, end.y + ' ' +
				'a' + r, r + ' 0 1', '0 ' + -end.x, -end.y
			];
		}

		if (textPath) {
			textPath.remove();
		}
		textPath = Design.paper.path(descriptions).attr({
			fill: "none",
			stroke: "#c2c2c2",
			strokeWidth: 1,
			strokeDasharray: '5,4'
		});
		textPath.appendTo(element.face.eleCon);
		if (element.element) {
			var matrix = element.element.matrix.clone();
			textPath.transform(matrix);
		}

		return descriptions.toString();
	}

	//切换
	$(".configuration-toolbox-wrapper").find(".btn").on("click", function() {
		$(".configuration-toolbox-wrapper").find(".btn").removeClass("font-family-button-cur");
		$(this).addClass("font-family-button-cur");
		var type = $(this).data("type");
		switch (type) {
			case "family":
				$(".configuration-toolbox").show();
				$(".design-color-picker").hide();
				break;
			case "color":
				$(".configuration-toolbox").hide();
				$(".design-color-picker").show();
				break;
			default:
				break;
		}
	});

	//字号
	var str = "";
	for (var i = 0; i < sizeArr.length; i++) {
		str += '<option value="' + sizeArr[i] + '">' + sizeArr[i] + '</option>';
	}
	$("#fontSizeSelect").append(str);

	//字体
	var str = "";
	for (var i = 0; i < familyArr.length; i++) {
		str += '<option value="' + familyArr[i] + '">'+familyArr[i]+'</option>'
	}
	$("#fontFamilySelect").append(str);

	layui.form.on('select(fontSize)', function(data) {
		if (element) {
			exports.size(data.value);
		}
	});

	layui.form.on('select(fontFamily)', function(data) {
		if (element) {
			exports.family(data.value);
			$(".font-family-setting").find("input").css("font-family", data.value);
		}
	});

	layui.form.render();

	setTimeout(function(){
		var options = $(".font-family-setting").find("dl dd");
		for (var i = 0; i < options.length; i++) {
			options.eq(i).css("font-family", familyArr[i]);
		}
	},1000)

	addSize.on("click", function() {
		if (element) {
			var size = parseInt(element.fontSize);
			exports.size(size + 4);
		}
	});

	subtractSize.on("click", function() {
		if (element) {
			var size = parseInt(element.fontSize);
			exports.size(size - 4);
		}
	});

	$(".font-family-setting").find("i").on("click", function() {
		var type = $(this).data("type");
		if (type == "bold") {
			var ww = "";
			if (element.fontWeight != "bold") {
				ww = "bold";
			}
			exports.weight(ww);
		} else if (type == "italic") {
			var st = "";
			if (element.fontStyle != "italic") {
				st = "italic";
			}
			exports.style(st);
		}
	});

	panel.find(".text-setting-operate").find("i").on("click", function() {
		var type = $(this).data("translate");
		exports.align(type);
	});
}

exports.color = function($color) {
	if (element) {
		element.color = $color;
	}
}

/*
 * 设置背景颜色
 */
exports.bgColor = function($color) {
	if (element) {
		element.bgColor = $color;
	}
}

exports.size = function($size) {
	if ($size) {
		if (element) {
			element.fontSize = $size;
			$(".font-size-settings").find("input").val(element.fontSize);
			Design.tool.update();
		}
	}
	return element.fontSize;
}

exports.family = function($family) {
	if (element) {
		element.fontFamily = $family;
		var showName = $family.split(",")[0];
		$(".font-family-setting").find("input").val(showName);
		Design.tool.update();
	}
}

exports.weight = function($w) {
	if (element) {
		element.fontWeight = $w;
		var dom = $(".font-family-setting").find("i[data-type='bold']");
		if ($w == "bold") {
			dom.addClass("active");
		} else {
			dom.removeClass("active");
		}
		Design.tool.update();
	}
}

exports.style = function($s) {
	if (element) {
		element.fontStyle = $s;
		var dom = $(".font-family-setting").find("i[data-type='italic']");
		if ($s == "italic") {
			dom.addClass("active");
		} else {
			dom.removeClass("active");
		}
		Design.tool.update();
	}
}

exports.align = function($s) {
	if (element) {
		element.fontAlign = $s;
		if (!$s) {
			$s = "left";
		}
		$(".text-setting-operate").find("i").removeClass("active");
		$(".text-setting-operate").find("i[data-translate='" + $s + "']").addClass("active");
		Design.tool.update();
	}
}

exports.bind = function($ele) {
	element = $ele;
	if (element.text != "请输入文本") {
		textInput.val(element.text);
	} else {
		textInput.val("");
	}
	exports.size(element.fontSize);
	exports.family(element.fontFamily);
	exports.weight(element.fontWeight);
	exports.style(element.fontStyle);
	exports.align(element.fontAlign);
	$(panel).css("transform", "translateX(0)");
	$(panel).css("opacity", "1");
	$("#bendingSlider .text-slider-control").css("left", '50%');
}

exports.unbind = function() {
	element = null;
	$(panel).css("transform", "translateX(320px)");
	$(panel).css("opacity", "0");
}

function textChange() {
	if (element) {
		element.text = textInput.val();
		Design.tool.update();
	}
}

module.exports = exports;
